import { useMemo } from 'react'
import useWidget from '@/hooks/useWidget'
import useTheme from './useTheme'
import useGrid from './useGrid'
import useLegend from './useLegend'
import useDataZoom from './useDatazoom'
import useTooltip from './useTooltip'
import useCategoryAxis from './useCategoryAxis'
import useSeries from './useSeries'

function useChart(widgetId, chartLib) {
  const { currentWidget } = useWidget(widgetId)
  const chart = useMemo(() => currentWidget?.styleValue?.chart || {}, [currentWidget])
  const axis = useMemo(() => currentWidget?.styleValue?.axis || {}, [currentWidget])
  const type = useMemo(() => currentWidget?.type, [currentWidget])

  const theme = useTheme()
  const grid = useGrid(chart)
  const { legend, legendComponent } = useLegend(chart)
  const { dataZoom, dataZoomComponent } = useDataZoom(chart)
  const tooltip = useTooltip(chart, type)
  const categoryAxis = useCategoryAxis(widgetId, axis)
  const series = useSeries(widgetId, type)

  return {
    theme,
    grid,
    legend,
    dataZoom,
    tooltip,
    categoryAxis,
    series,
    lib: [chartLib, ...legendComponent, ...dataZoomComponent]
  }
}

export default useChart
